<template>
    <section class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <div @click="changeStatus('popupVisible', true)" class="giveMoney_0312"><span>添加感谢费</span><span>0元</span></div>
        <div class="personNum_0312">已有<span class="num_0312"> 10 </span>位行家愿意约见</div>
        <div class="applyItem_0312">
          <div class="applyTop_0312">
            <div class="applyFace_0312"></div>
            <div class="applyText_0312">
              <p class="p1_0312"><span class="span1_0312">刘宏</span>人力资源总裁、国企培训讲师</p>
              <p class="p2_0312">擅长领域：企业培训、公司文化建立收到</p>
            </div>
            <div class="applySession_0312"></div>
          </div>
          <div class="applyBottom_0312">
            <div class="info_0312">匹配度95%</div>
            <div class="info_0312 buttoms_0312">
              <router-link to="/theme"><button class="agrees_0312">同意</button></router-link>
              <button class="reject_0312">拒绝</button>
            </div>
          </div>
        </div>
        <div class="applyItem_0312">
          <div class="applyTop_0312">
            <div class="applyFace_0312"></div>
            <div class="applyText_0312">
              <p class="p1_0312"><span class="span1_0312">刘宏</span>人力资源总裁、国企培训讲师</p>
              <p class="p2_0312">擅长领域：企业培训、公司文化建立收到</p>
            </div>
            <div class="applySession_0312"></div>
          </div>
          <div class="applyBottom_0312">
            <div class="info_0312">匹配度95%</div>
            <div class="info_0312 buttoms_0312">
              <button class="agrees_0312">同意</button>
              <button class="reject_0312">拒绝</button>
            </div>
          </div>
        </div>
        <div class="applyItem_0312">
          <div class="applyTop_0312">
            <div class="applyFace_0312"></div>
            <div class="applyText_0312">
              <p class="p1_0312"><span class="span1_0312">刘宏</span>人力资源总裁、国企培训讲师</p>
              <p class="p2_0312">擅长领域：企业培训、公司文化建立收到</p>
            </div>
            <div class="applySession_0312"></div>
          </div>
          <div class="applyBottom_0312">
            <div class="info_0312">匹配度95%</div>
            <div class="info_0312 buttoms_0312">
              <button class="agrees_0312">同意</button>
              <button class="reject_0312">拒绝</button>
            </div>
          </div>
        </div>
        <div class="applyItem_0312">
          <div class="applyTop_0312">
            <div class="applyFace_0312"></div>
            <div class="applyText_0312">
              <p class="p1_0312"><span class="span1_0312">刘宏</span>人力资源总裁、国企培训讲师</p>
              <p class="p2_0312">擅长领域：企业培训、公司文化建立收到</p>
            </div>
            <div class="applySession_0312"></div>
          </div>
          <div class="applyBottom_0312">
            <div class="info_0312">匹配度95%</div>
            <div class="info_0312 buttoms_0312">
              <button class="agrees_0312">同意</button>
              <button class="reject_0312">拒绝</button>
            </div>
          </div>
        </div>
        <div class="applyItem_0312">
          <div class="applyTop_0312">
            <div class="applyFace_0312"></div>
            <div class="applyText_0312">
              <p class="p1_0312"><span class="span1_0312">刘宏</span>人力资源总裁、国企培训讲师</p>
              <p class="p2_0312">擅长领域：企业培训、公司文化建立收到</p>
            </div>
            <div class="applySession_0312"></div>
          </div>
          <div class="applyBottom_0312">
            <div class="info_0312">匹配度95%</div>
            <div class="info_0312 buttoms_0312">
              <button class="agrees_0312">同意</button>
              <button class="reject_0312">拒绝</button>
            </div>
          </div>
        </div>
        <mt-popup class="popupWrap_0315" v-model="popup.popupVisible" position="bottom">
          <div class="popups_0315">
            <div class="btnsWrap_0315">
              <span class="closeBtn_0315" @click="changeStatus('popupVisible', false)">关闭</span>
              <span class="sendBtn_0315" @click="changeStatus('popupVisible', false)">确认</span>
            </div>
            <div class="changeMoney_0315">
              <span class="moneys_0315 activeMoney_0315">0元</span>
              <span class="moneys_0315">50元</span>
              <span class="moneys_0315">100元</span>
              <span class="moneys_0315"  @click="otherMoney()">其他</span>
            </div>
          </div>
        </mt-popup>
        
      </main>
      
    </section>
</template>
<script>
import myHeader from './base/myHeader';
import { Popup } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
  data () {
    return {
      myObj: {
        type: 3,
        text: '申请列表'
      },
      popup: {
        popupVisible: false,
      }
      
    }
  },
  methods: {
    events(i){
      if( i == 2) {
        history.back();
      }
    },
    changeStatus(str,status){
      this.popup[str] = status;
    },
    otherMoney() {
      MessageBox.prompt("请输入金额",'').then(({ value, action }) => {
        this.changeStatus('popupVisible', false)
        console.log(value)
      },() => {
        this.changeStatus('popupVisible', false)
      });
    }
  },
  components: {
    myHeader,
    Popup,
    MessageBox
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    height: 100%;
    main {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      .popupWrap_0315 {
        .popups_0315 {
          width: 3.75rem;
          height: 2.07rem;
          background: white;
          .changeMoney_0315 {
            padding: 0 .12rem;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .moneys_0315 {
              display: block;
              width: .74rem;
              height: .33rem;
              line-height: .33rem;
              text-align: center;
              color: #828282;
              font-size: .16rem;
              background: #E5E5E5;
              border-radius: .04rem;
            }
            .activeMoney_0315 {
             background: #557AFF;
             color: white;
            }

          }
          .btnsWrap_0315 {
            width: 3.75rem;
            display: flex;
            padding: 0 .51rem .3rem;
            box-sizing: border-box;
            .closeBtn_0315 {
              display: block;
              width: 1.27rem;
              height: .3rem;
              line-height: .3rem;
              text-align: left;
              font-size: .15rem;
              color: #828282;
            }
            .sendBtn_0315 {
              display: block;
              width: 1.27rem;
              height: .3rem;
              line-height: .3rem;
              text-align: right;
              font-size: .15rem;
              color: #39393D;
            }

          }

        }
      }
      .applyItem_0312 {
        width: 3.55rem;
        height: 1.25rem;
        background: white;
        border-radius: .04rem;
        margin: 0 auto .1rem;
        padding-top: .18rem;
        box-sizing: border-box;
        .applyBottom_0312 {
          width: 100%;
          height: .47rem;
          display: flex;
          padding: 0 .13rem;
          box-sizing: border-box;
          .info_0312 {
            width: 50%;
            height: .47rem;
            line-height: .47rem;
            color: #557AFF;
            font-size: .13rem;
          }
          .buttoms_0312 {
            padding-top: .1rem;
            box-sizing: border-box;
            button {
              display: block;
              width: .57rem;
              height: .26rem;
              font-size: .13rem;
              font-weight: bold;
              border: none;
              border-radius: .04rem;
              float: right;
              &.reject_0312 {
                background: #E5E5E5;
                color: #39393D;
                margin-right: .15rem;
                
              }
              &.agrees_0312 {
                background: #557AFF;
                color: white;
              }
            }

          }
        }
        .applyTop_0312 {
          width: 100%;
          height: .57rem;
          border-bottom: .01rem solid #E5E5E5;
          display: flex;
          .applySession_0312 {
            width: .25rem;
            height: .25rem;
            border-radius: 50%;
            border: .01rem solid #D5AE75;
            background: url('../assets/img/icon_message@3x.png') center center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: .18rem;
          }
          .applyFace_0312 {
            width: .42rem;
            height: .42rem;
            border-radius: 50%;
            background: #EBEBEB;
            margin: 0 .15rem 0 .05rem;
          }
          .applyText_0312 {
            width: 2.5rem;
            .p1_0312 {
              width: 2.5rem;
              font-size: .12rem;
              color: #828282;
              padding-bottom: .1rem;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              .span1_0312 {
                font-size: .14rem;
                color: #39393D;
                padding-right: .04rem;

              }
            }
            .p2_0312 {
                width: 2.5rem;
                font-size: .12rem;
                color: #555555;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
          }
        }
      }
      .giveMoney_0312 {
        width: 100%;
        height: .64rem;
        border-top: .01rem solid #E5E5E5;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #555555;
        font-size: .16rem;
        font-weight: bold;
        padding: 0 .15rem;
        box-sizing: border-box;
        margin-bottom: .08rem;
      }
      .personNum_0312 {
        width: 100%;
        height: .64rem;
        font-size: .16rem;
        color: #555555;
        padding: .33rem .14rem 0 .14rem;
        box-sizing: border-box;
        background: #FAFAFA;
        margin-bottom: .08rem;
        .num_0312 {
          color: #557AFF;
          padding: 0 .02rem;
        }
      }
    }

  }

</style>
<style>
  .mint-msgbox .mint-msgbox-input .mint-msgbox-errormsg {
    display: none;

  }
  .mint-msgbox-content .mint-msgbox-message {
    color: #000;
    font-weight: bold;
  }
  .mint-msgbox .mint-msgbox-input input {
    border: .01rem solid #ccc;
    box-sizing: border-box;
    height: .35rem;
  }
</style>
